<section class="main-section grid_7">
	<div class="main-content">
		<header>
			<ul class="action-buttons clearfix fr">
				<li><a href="/html/help/badges.html" class="button button-gray no-text help" rel="#overlay">Help<span class="help"></span></a></li>
			</ul>
			<h2>Badges</h2>
		</header>
		<section class="container_6 clearfix">
			<div class="grid_6"><!-- the tabs -->
				<div class="tabbed-pane">
					<ul class="tabs">
						<li><a href="#">Badge Themes</a></li>
						<li><a href="#">Upload a Badge</a></li>
					</ul>

					<!-- tab "panes" -->
					<div class="panes clearfix">
						<section>
							<h3>Badges</h3>
                                                        {% if has_error %}
                                                          <div class="message error">{{ error }}</div>
                                                        {% endif %}
							{% if badges %}
							<table class="datatable">
								<thead>
									<tr>
										<th>Theme</th>
										<th>Badge name</th>
										<th>Description</th>
										<th>Badge Id</th>
										<th>Badge</th>
                                                                                <th></th>
									</tr>
								</thead>
								<tbody>
									{% for badge in badges %}
									<tr>
										<td>{{badge.theme}}</td>
										<td>{{ badge.name}}</td>
										<td>{{ badge.description }}</td>
										<td>{{badge.id}}</td>
										<td><img width="90" height="90"
											src="{{badge.downloadLink}}" alt="{{ badge.alt }}" /></td>
                                                                                <td><button class='button button-gray' onclick='deleteBadge("{{ badge.id }}");'><span class='bin'></span>Delete</button></td>
									</tr>
									{% endfor %}
								</tbody>
							</table>
							{% else %}
							<h5>No custom badges in your account.</h5>
							{% endif %}
						</section>
						<section> <!-- Upload a badge -->
							<div id="badgeuploadpane">
                                                        <div class="message info">Note: For best result, upload square images</div>
								<form id="form" class="form grid_5" action="{{upload_url}}" method="post" enctype="multipart/form-data">
									<fieldset>
										<legend>Upload a badge</legend>
										<label>Name<em>*</em><small>Name of badge (keep short)</small></label><input type="text" name="badgename" required="required" />
										
										<label>Theme<em>*</em><small>Specify theme (keep short)</small></label><input type="text" name="badgetheme" required="required" />
										<label>Description<em>*</em><small>Give a description</small></label><input type="text" name="badgedescription" required="required" /> 
										<label>Image<em>*</em><small>Upload the image (128k or less)</small></label><input type="file" name="file" required="required" />
										<div class="action">
											<button class="button button-gray" type="submit"><span class="accept"></span>OK</button>
											<button class="button button-gray" type="reset">Reset</button>
										</div>
									</fieldset>
								</form>
							</div>
						</section>
					</div>
				</div>
			</div>
		</section>
	</div>
</section>
